<template lang="">
    <div style="width:40%;">
        <h2>添加库位</h2>
        <el-divider></el-divider>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                <el-form-item label="库位编号" prop="locationCode">
                <el-input v-model="form.locationCode" readonly></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                <el-form-item label="库位名称" prop="locationName">
                <el-input v-model="form.locationName" width:200px></el-input>
                </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                <el-form-item label="仓库类型" prop="warehouseId" >
                <el-select v-model="form.warehouseId"  placeholder="仓库" clearable style="width:100%">
                    <el-option label="请选择" :value="0" >请选择</el-option>
                <el-option v-for="item in getWarehousBoxList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                <el-form-item label="库位类型" prop="locationType">
                <el-select v-model="form.locationType"  placeholder="库位类型" clearable style="width:100%">
                <el-option label="请选择" value=""></el-option>
                <el-option el-option label="报损库区" value="报损库区"></el-option>
                <el-option el-option label="待出库区" value="待出库区"></el-option>
                </el-select>
                </el-form-item>
                </el-col>
            </el-row>   
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item label="面积" prop="locationarea">
                    <el-input v-model="form.locationarea"></el-input>
                    </el-form-item></el-col>
                    <el-col :span="12" :offset="0">
                    <el-form-item label="是否禁用" prop="isDisable" align="left">
                    <el-radio-group v-model="form.isDisable" >
                    <el-radio :label="true">启用</el-radio>
                    <el-radio :label="false">禁用</el-radio>
                    </el-radio-group>
                    </el-form-item></el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item label="是否默认" prop="isDefault"  align="left">
                    <el-radio-group v-model="form.isDefault">
                    <el-radio :label="true">启用</el-radio>
                    <el-radio :label="false">禁用</el-radio>
                    </el-radio-group>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                    <el-form-item label="备注" prop="remarks">
                    <el-input v-model="form.remarks"></el-input>
                    </el-form-item>
                    
                </el-col>
            </el-row>
        <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
        <el-button @click="Cancel">返回</el-button>
    </el-form-item>
</el-form>

    </div>
</template>
<script>
import { GetWarehousBox, AddLocationAsync } from "@/api/BasicsDatumServer/locationServers";
import { autoGenerateCode } from "@/utils/utils";
export default {
    //数据
    data() {
        return {
            form: {
                locationCode: "",
                locationName: "",
                locationType: "",
                locationarea: "",
                warehouseId: 0,
                remarks: "",
                isDefault: false,
                isDisable: false,
            },
            rules: {
                locationName: [
                    { required: true, message: '请输入库位名称', trigger: 'blur' },
                ],
                locationType: [
                    { required: true, message: '请选择库位类型', trigger: 'change' }
                ],
                locationarea: [
                    { required: true, message: '请输入面积', trigger: 'blur' },
                    { pattern: /^[0-9]*$/, message: '面积必须为数字', trigger: 'blur' },
                ],
                warehouseId: [
                    { required: true, message: '请选择仓库', trigger: 'change' }
                ],
                isDefault: [
                    { required: true, message: '请选择是否禁用', trigger: 'change' }
                ],
                isDisable: [
                    { required: true, message: '请选择是否禁用', trigger: 'change' }
                ],
            },
            getWarehousBoxList: [],
        }
    },
    //方法
    methods: {
        //取消
        Cancel() {
            this.$router.push("/BasicsDatumServer/locationMangement/LocationList");
        },
        //下拉框
        getWarehousBoxmethod() {
            GetWarehousBox().then((res) => {
                //console.log(res);
                this.getWarehousBoxList = res.data;
                //console.log(this.getWarehousBoxList);
            });
        },
        //添加
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    AddLocationAsync(this.form).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.$router.push("/BasicsDatumServer/locationMangement/LocationList");
                        } else {
                            this.$message.error('错了哦，添加失败');
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },


    },
    //挂载
    mounted() {
        this.getWarehousBoxmethod();
        this.form.locationCode = autoGenerateCode("KW");
    },
}
</script>
<style lang="">
    
</style>